<template>
  <transition name="show">
    <div class="song-sheet">
      <div class="song-sheet-top">
        <div class="left">
          <span class="icon-xiangzuojiantou iconfont" @click="goBack"/>
          <span class="size">歌单</span>
        </div>
        <div class="right">
          <span class="icon-sousuo iconfont"/>
          <span class="icon-Androidgengduo_o iconfont"/>
        </div>
      </div>
      <div class="song-info">
        <div class="top">
          <div class="left">
            <img :src="songSheetInfo?.picUrl?songSheetInfo?.picUrl:songSheetInfo?.coverImgUrl" alt=""/>
            <div class="icon-24gf-play iconfont playcount">
              {{ parseInt(songSheetInfo?.playcount ? songSheetInfo?.playcount : songSheetInfo?.playCount / 10000) }}万
            </div>
          </div>
          <div class="right">
            <div class="title">{{ songSheetInfo?.name }}</div>
            <div class="info">
              <div class="avatar">
                <img :src="songSheetInfo?.creator?.avatarUrl" alt=""/>
              </div>
              <div class="name">{{ songSheetInfo?.creator?.nickname }}</div>
            </div>
            <div class="tags">
              <van-tag type="primary" class="tag">6.9分></van-tag>
              <van-tag type="primary" class="tag">华语></van-tag>
              <van-tag type="primary" class="tag">流行></van-tag>
            </div>
          </div>
        </div>
        <div class="desc ov1">{{ songSheetInfo?.creator?.signature }}</div>
        <div class="use">
          <div class="item">分享</div>
          <div class="item">评论</div>
          <div class="item">点赞</div>
        </div>
      </div>
      <div class="song-list" v-if="songList?.length > 0">
        <div class="top">
          <div class="left">
            <span class="iconfont icon-yunhang"></span>
            <span class="title"
            >播放全部
              <div class="play">( {{ songList?.length }} )</div>
            </span>
          </div>
          <div class="right">
            <span class="iconfont icon-xiazai"></span>
            <span class="iconfont icon-gengduo"></span>
          </div>
        </div>
        <div class="content">
          <div
              :class="['item', item.id == store.state.index.songInfo.id ? 'active' : '']"
              v-for="(item, index) in songList"
              @click="changeSongSheet(item)"
              :key="item.id"
          >
            <!--            <div class="number"> {{ index + 1 }}</div>-->
            <div
                :class="['number', item.id == store.state.index.songInfo.id ? 'active' : '']"
            >
              {{ index + 1 }}
            </div>
            <div
                :class="['info', item.id == store.state.index.songInfo.id ? 'active' : '']"
            >
              <div class="song-name">{{ item.name }}</div>
              <div
                  :class="[
                  'author-name',
                  item.id == store.state.index.songInfo.id ? 'active' : '',
                ]"
                  v-for="ar in item?.ar"
                  :key="ar.id"
              >
                {{ ar?.name }}
              </div>
            </div>
            <div class="iconfont icon-Androidgengduo_o"></div>
          </div>
        </div>
      </div>
      <div class="song-list" style="text-align: center" v-else>
        该歌单还没有歌曲
      </div>
    </div>
  </transition>
</template>


<script setup>
import store from "../../store/index.js";
import {computed, onMounted, ref} from "vue";
import api from "../../utils/api.js";

const route = useRoute();
const router = useRouter();
import methods from "../../utils/methods.js";
import {useRoute, useRouter} from "vue-router";
// 歌曲列表
const songList = ref([]);
// 歌单信息
const songSheetInfo = ref(store.state.index.songSheetInfo);
const goBack = () => {
  // 设置显示为false
  router.back();
};

// 修改歌单信息及播放信息
const changeSongSheet = (songInfo) => {
  // 设置歌曲信息
  store.dispatch("changeSong", songInfo);
  // 刷新歌单列表
  store.commit("setSongList", songList.value);
  store.commit("setIsPlay", false);
  methods.playAudio2();
};

onMounted(async () => {
  // 获取歌曲列表
  songList.value = await api.getSongSheetSongList(route.params.id);
  if (songSheetInfo.value != '') {
    songSheetInfo.value = await api.getSongSheetDetail(route.params.id);
  }// console.log(songSheetInfo.value)
});

</script>


<style scoped lang="scss">
.song-sheet {
  width: 100%;
  top: 0;
  position: absolute;
  z-index: 9;
  height: 100vh;
  background: #c2c2c2;
  display: flex;
  flex-direction: column;

  .song-sheet-top {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .size {
      font-size: 18px;
    }

    .iconfont {
      font-size: 20px;
    }

    .icon-xiangzuojiantou {
      margin-right: 15px;
    }

    .icon-Androidgengduo_o {
      margin-left: 25px;
    }
  }

  .song-info {
    padding: 20px;

    .top {
      display: flex;

      .left {
        min-width: 100px;
        min-height: 100px;
        background: #000;
        border-radius: 10px;
        margin-right: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;

        img {
          width: 100px;
          height: 100px;
        }

        .playcount {
          color: #fff;
          font-weight: 550;
          top: 4px;
          right: 6px;
          position: absolute;
          font-size: 12px;
        }
      }

      .right {
        .title {
          color: #fff;
          line-height: 20px;
          max-height: 40px;
        }

        .info {
          margin: 10px 0;
          display: flex;

          .avatar {
            width: 20px;
            height: 20px;
            background: #000;
            border-radius: 10px;
            display: flex;
            align-items: center;
            overflow: hidden;

            img {
              width: 20px;
            }
          }

          .name {
            color: #666;
            margin-left: 5px;
            line-height: 20px;
            font-size: 12px;
          }
        }

        .tags {
          .tag {
            background: rgba(122, 122, 122, 0.3);
            margin-right: 5px;
          }
        }
      }
    }

    .desc {
      margin: 10px 0;
      font-size: 13px;
      color: #333;
    }

    .use {
      display: flex;
      justify-content: space-between;

      .item {
        flex: 1;
        background: rgba(100, 100, 100, 0.1);
        line-height: 40px;
        border-radius: 20px;
        text-align: center;
      }

      .item:nth-child(2) {
        margin: 0 10px;
      }
    }
  }

  .song-list {
    flex: 1;
    height: 300px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px 10px 0 0;
    padding: 15px;

    .top {
      margin-bottom: 10px;
      //background: rgba(0,0,0,.1);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;

        .icon-yunhang {
          margin-right: 10px;
        }

        .title {
          font-size: 14px;
          align-items: center;
          display: flex;

          .play {
            color: #666;
            margin-left: 10px;
            font-size: 12px;
          }
        }
      }

      .right {
        .icon-gengduo {
          margin-left: 20px;
        }
      }

      .iconfont {
        font-size: 20px;
      }
    }

    .content {
      flex: 1;
      overflow-y: scroll;
      padding-bottom: 30px;

      .item {
        display: flex;
        align-items: center;
        //justify-content: center;
        padding: 5px 0;

        .number {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 25px;
          height: 46px;
          color: #666;
        }

        .info {
          margin-left: 10px;
          flex: 1;

          .song-name {
            font-size: 14px;
          }

          .author-name {
            float: left;
            color: #666;
            font-size: 13px;
            line-height: 20px;
          }

          // 给名字增加伪元素
          .author-name:not(:last-child)::after {
            content: "/";
          }
        }
      }
    }
  }
}
</style>
